
<!-------------------------------------------------------------vidu1(datetime picker, append, remove)------------------------------------->
<script type="text/javascript">
$(document).ready(function() {
	$( ".trigger" ).click(function() {
		alert("gdsgdsg");
//		$( ".result" ).text( "Triggered ajaxComplete handler." );
//		$(".log").append( "<div><li>Request Complete.</li><li class = 'btn'>remove</li></div>" );
		});
});
$(".btn").live('click', function() {
//	$("#showZeni").closest('li').removeClass('li-disabled');
    $(this).parent().closest('div').remove();
   
    
});
$(function() {
    $( ".datepicker" ).datetimepicker({
	    dateFormat: "yyyy-mm-dd HH:MM:ss"
	    });
  });


</script>

<?php 
	echo $this->Form->input('from_day', array('label' => false,'class' => "datepicker" ));
//	echo $this->Form->button('from_day', array('class' => "trigger" ));
?>
<div class="trigger">click</div>
<div class="result"></div>
<div class="log"></div>



<!-----------------------------------------------------------------vidu2(addClass)-------------------------------------------------------->
<style>
  p { margin: 8px; font-size:16px; }
  .selected { color:blue; }
  .highlight { background:yellow; }
  </style>
<div style="background-color:#EEEEEE;">
<p>Hello</p>
  <p>and</p>
  <p>Goodbye</p>
</div> 
<script>
  $("p").first().addClass("selected");
  </script>
  
  
  
  
<!-------------------------------------------------------------- vidu3(keyup, val(), text() or html())------------------------------------>
<style>
#van{
	color: green;
}
</style>

 <input id = "nam" type="text" value=""/>
 <input id = "remove" type="text" value="vanxinhhp@gmail.com"/>
 <p id = "van"></p>
 
<script>
    $('input#nam').keyup(function(){
        var value = $(this).val();
        $('p#van').text(value);
        $('#remove').each(function(){
            this.disabled = "disabled"
        });
        
        });
    
</script>

<!-------------------------------------------------------------- vidu4(jQuery( selector [, context ] ))-------------------------------->
<!--tim #hey trong div#vidu4-->
<script >
$(document.body).css( "background", "#9CCDC5" );
$(document).ready(function(){
$('div#vidu4').click(function(){
	$("#hey", this).text('xin chao cac ban LTT');
});
});

</script>

<div id = "vidu4", style="background-color:#EEEEEE;">
<a >click_here</a>
<p>hello</p>
<span id = "hey">HELLO</span>
</div>



<!--tim trong 1 from sau khi submit theo post or get-->
<script >
$(document).ready(function(){
	$("#form").click(function(){
		var valueText =  $("#child").val();
//		alert(valueText);return false;
		$("#check").text(valueText); return false;
		});
	
});



</script>

<?php
echo $this->Form->create('jquery', array('id' => 'form'));
echo $this->Form->input('check' ,array('id' => 'child'));
echo $this->Form->submit('click');
echo $this->Form->end(); 
?>

<p id = "check"></p>
<!-------------------------------------------------------------- vidu5(live(), die())----------------------->
<div id = "vidu4", style="background-color:#EEEEEE;">
<p id = "die">check die</p>
<p id = "show"></p>
</div>
<script type="text/javascript">
	var i = 1;
	if (i === 1){
		$("#die").live('click', function(){
			$("#show").text("show live");
			
		});
	}else{
		$("#die").die('click', function(){
//			$("#show").text("show live");
				
		});
	}

</script>
<span id = "test_live">click_here</span>
<p id = "live">hello</p>

<style>
#live{
	color: green
}
.mouseover{
 color: red
}
.mouseout{
 color: green
}

</style>
<script type="text/javascript">

$("#test_live").live({
	click: function(){
		$("#live").text("you clicked");
		
	},
	mouseover:function(){
		$(this).addClass("mouseover");
//		.fadeIn(30).fadeOut(1000)
		
	},
	mouseout: function(){
		$(this).addClass("mouseout");
	}
});
$(document).ready(function(){
	$("#live").click( function(){
			alert("successfly");
		});
});

</script>


<form>
  <input class="target" type="text" value="Field 1" />
  <select class="target">
    <option value="option1" selected="selected">Option 1</option>
    <option value="option2">Option 2</option>
  </select>
</form>
<div id="other">
  Trigger the handler
</div>



<!-------------------------------------------------------------- vidu6(click)------------------------------------------------>
<p>First Paragraph</p>
<p>Second Paragraph</p>
<p>Yet one more Paragraph</p>
<script type="text/javascript">
 $("p").click(function(){
	 $(this).slideUp();
 });
</script>







